<template>
  <div v-if="tableData">
    <el-form v-model="Info">
      <el-row>
        <span>当前位置:</span>
        <el-button type="primary" plain round size="small" @click="selected = 1"
          >全部商品</el-button
        >
        <el-button type="primary" plain round size="small" @click="selected = 2"
          >审核中</el-button
        >
        <el-button type="primary" plain round size="small" @click="selected = 3"
          >商品下架</el-button
        >
      </el-row>
      <div style="margin-top: 15px">
        <el-input placeholder="请输入商品名称" v-model="input" size="small">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <el-row style="margin-top: 15px">
        <el-select v-model="value" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="info" plain size="small" style="margin-left: 20px"
          >批量下架</el-button
        >
        <el-button type="warning" plain size="small">批量删除</el-button>
      </el-row>
      <el-row style="margin-top: 30px">
        <h4>商品管理</h4>
      </el-row>

      <!-- 全部商品 -->
      <el-row style="margin-top: 15px" v-show="selected == 1">
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column prop="id" label="id" width="120" align="center">
          </el-table-column>
          <el-table-column label="图片" width="120" align="center">
            <template slot-scope="scope">
              <img
                :src="
                  require(`/public/commodity/${scope.row.img.split(',')[0]}`)
                "
                alt=""
                width="100%"
                height="100vh"
              />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="种类" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="商品名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="commodity"
            label="商品介绍"
            width="400"
            align="center"
          >
          </el-table-column>
          <el-table-column label="商品价格" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="商品库存" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="100" align="center">
            <template slot-scope="scope">{{
              moment(scope.row.date).format("YYYY-MM-DD HH:mm:ss")
            }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block" v-show="selected == 1">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="20"
        >
        </el-pagination>
      </div>
      <!-- 审核中 -->
      <el-row style="margin-top: 15px" v-show="selected == 2">
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column prop="id" label="id" width="120" align="center">
          </el-table-column>
          <el-table-column label="图片" width="120" align="center">
            <template slot-scope="scope">
              <img
                :src="
                  require(`/public/commodity/${scope.row.img.split(',')[0]}`)
                "
                alt=""
                width="100%"
                height="100vh"
              />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="种类" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="商品名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="commodity"
            label="商品介绍"
            width="400"
            align="center"
          >
          </el-table-column>
          <el-table-column label="商品价格" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="商品库存" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="100" align="center">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block" v-show="selected == 2">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="20"
        >
        </el-pagination>
      </div>
      <!-- 下架商品 -->
      <el-row style="margin-top: 15px" v-show="selected == 3">
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column prop="id" label="id" width="120" align="center">
          </el-table-column>
          <el-table-column label="图片" width="120" align="center">
            <template slot-scope="scope">
              <img
                :src="
                  require(`/public/commodity/${scope.row.img.split(',')[0]}`)
                "
                alt=""
                width="100%"
                height="100vh"
              />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="种类" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="商品名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="commodity"
            label="商品介绍"
            width="400"
            align="center"
          >
          </el-table-column>
          <el-table-column label="商品价格" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="商品库存" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="100" align="center">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block" v-show="selected == 3">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="20"
        >
        </el-pagination>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 1,
      input: "",
      Info: "",
      oid: "",
      currentPage: 1,
      value: "",
      multipleSelection: [],
      options: [
        {
          value: "1",
          label: "上衣",
        },
        {
          value: "2",
          label: "下装",
        },
        {
          value: "3",
          label: "鞋类",
        },
      ],
      tableData: [],
    };
  },
  watch: {
    selected() {
      this.getData();
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    getData() {
      let url = `http://localhost:8000/stroll/shop/${this.selected}`;
      this.axios.get(url).then((res) => {
        this.tableData = res.data;
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
div {
  line-height: 0;
  margin: 0;
  padding: 0;
  .el-input {
    width: 500px;
  }
}
.block {
  width: 500px;
  margin: 0 auto;
  .el-pagination {
    margin-top: 30px;
  }
}
</style>